<template>
    <div>
        <!-- 表格区 -->
        <el-table border :data="permissionList" row-key="id" :expand-row-keys="expandKeys" size="medium">
            <el-table-column label="名称" prop="name"></el-table-column>
            <el-table-column label="权限值" prop="code"></el-table-column>
            <el-table-column label="跳转权限值" prop="toCode"></el-table-column>
            <el-table-column label="操作">
                <template #default="{ $index, row }">
                    <el-button type="primary" size="mini" icon="el-icon-plus" :disabled="row.level === 4"
                        :title="row.level > 2 ? '添加功能' : '添加菜单'" @click="addMenu(row)"></el-button>
                    <el-button type="primary" size="mini" icon="el-icon-edit-outline" :disabled="row.level === 1"
                        :title="row.level > 2 ? '编辑功能' : '编辑菜单'" @click="editMenu(row)"></el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete" :disabled="row.level === 1" title="删除"
                        @click="deleteMenu(row)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 弹框区 -->
        <el-dialog :title="level > 2 ? '添加功能' : '添加菜单'" :visible.sync="dialogFormVisible" top="0px">
            <el-form :model="addParams" :rules="rules" ref="ruleForm">
                <el-form-item label="名称" label-width="120px" prop="name">
                    <el-input v-model="addParams.name"></el-input>
                </el-form-item>
                <el-form-item label="功能权限值" label-width="120px" prop="code">
                    <el-input v-model="addParams.code"></el-input>
                </el-form-item>
                <el-form-item label="跳转路由权限值" label-width="120px" v-if="level > 2">
                    <el-input v-model="addParams.toCode"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="onCancel('ruleForm')">取 消</el-button>
                <el-button type="primary" @click="onSave('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import permissionApi from '@/api/acl/permission';
export default {
    name: "VPermission",
    data() {
        return {
            permissionList: [],  //初始数据
            expandKeys: ['1'],   //放需要默认展开行的id

            dialogFormVisible: false,  //控制弹框
            level: '',    //当前点击的该等级
            addParams: {
                type: '',     //类型
                level: '',     //等级 (下一级的等级)
                name: "",    //名称
                code: "",    //权限值
                toCode: "",  //跳转权限值
                pid: "",   //父id
            },
            //表单校验
            rules: {
                name: [
                    { required: true, message: '名称必须输入', trigger: 'blur' }
                ],
                code: [
                    { required: true, message: '权限值必须输入', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        //删除菜单
        deleteMenu(row) {
            // console.log(row);
            this.$confirm(`是否删除${row.name}?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await permissionApi.removePermission(row.id)
                this.getPermissionData()   //刷新页面
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        //修改菜单
        editMenu(row) {
            this.level = row.level  //将当前等级存起来
            this.dialogFormVisible = true // 弹框显示
            this.addParams = row    //数据回显
        },
        //取消
        onCancel(formName) {
            this.dialogFormVisible = false
            this.$refs[formName].resetFields();  //取消飘红
        },
        //保存
        onSave(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    //组织参数
                    this.addParams.level = this.level + 1   //等级
                    this.addParams.type = this.level + 1 === 4 ? 2 : 1  //类型
                    //发送请求
                    if (this.addParams.id) {   //存在id即为编辑
                        await permissionApi.updatePermission(this.addParams)
                    } else {
                        await permissionApi.addPermission(this.addParams)
                    }
                    //刷新页面
                    this.getPermissionData()
                    this.onCancel('ruleForm')    //关闭弹框
                    this.$message.success('保存成功')
                }
            })
        },
        //添加菜单
        addMenu(row) {
            // console.log(row);
            //清空上一次添加的值
            this.addParams = {
                type: '',     //类型
                level: '',     //等级 (下一级的等级)
                name: "",    //名称
                code: "",    //权限值
                toCode: "",  //跳转权限值
                pid: "",   //父id
            }
            this.dialogFormVisible = true
            this.level = row.level
            this.addParams.pid = row.id   //将点击的这个id存起来,当做请求的父id
        },
        //获取列表数据
        async getPermissionData() {
            let res = await permissionApi.getPermissionList()
            this.permissionList = res.data.children
        }
    },
    mounted() {
        this.getPermissionData()
    },
}
</script>

<style lang="less" scoped></style>